<script lang="ts" setup>
import { reactive, ref } from "vue";
import router from "@/router/index";
import { type FormInstance, type FormRules } from "element-plus";
import PasswordInput from "@/components/sofastui/passwordInput/PasswordInput.vue";
import CodeInput from "@/components/sofastui/codeInput/CodeInput.vue";

const loading = ref<boolean>(false);
const unCheck = ref<boolean>(false);
const setup = ref<number>(0);
const loginFormRef = ref<FormInstance>();
const loginFormRules = reactive<FormRules>({
    phone: [
        {
            required: true,
            message: "Please input Activity username",
            trigger: "change",
        },
    ],
    code: [
        { required: true, message: "Please input code", trigger: "change" },
    ],
    username: [
        {
            required: true,
            message: "Please input Activity username",
            trigger: "change",
        },
    ],
    password: [
        { required: true, message: "Please input password", trigger: "change" },
    ],
    rpassword: [
        { required: true, message: "Please input rpassword", trigger: "change" },
    ],
});

const formData = ref<{
    [key: string]: any;
}>({
    phone: "",
    code: "",
    username: "",
    password: "",
    rpassword: "",
    check: false,
});
const onSubmit = async (formEl: FormInstance | undefined) => {
    console.log("submit!");
    // router.push({ path: "/wel" });

    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            try {
                setup.value = setup.value + 1

            } catch (error) {
                console.log("error submit!!");
                loading.value = false;
            }
        } else {
            loading.value = false;
            // eslint-disable-next-line no-undef
            ElMessage({
                type: "warning",
                message: "请填写正确的用户名及密码",
                grouping: true,
            });
            console.log("error submit!", fields);
        }
    });

};
</script>

<template>
    <div class="h-full w-full flex justify-center items-center">
        <div class="login-box w-4/5 sm:w-1/2 md:w-4/5 lg:w-3/5 xl:w-1/2 2xl:w-2/5">
            <div class="login-title mb-10 text-4xl">欢迎注册</div>
            <div class="login-form">
                <el-form :model="formData" ref="loginFormRef" :rules="loginFormRules" label-width="0" size="large"
                    :show-message="false" inline-message status-icon>
                    <template v-if="setup === 0">
                        <el-form-item prop="phone">
                            <el-input v-model="formData.username" placeholder="手机号" />
                        </el-form-item>
                        <el-form-item prop="code" :status-icon="false">
                            <CodeInput v-model="formData.code" placeholder="验证码" />
                        </el-form-item>
                    </template>
                    <template v-if="setup === 1">
                        <el-form-item prop="username">
                            <el-input v-model="formData.username" placeholder="用户名" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <PasswordInput v-model="formData.password" placeholder="登录密码" />
                        </el-form-item>
                        <el-form-item prop="rpassword">
                            <el-input v-model="formData.rpassword" placeholder="确认密码" />
                        </el-form-item>
                    </template>
                    <el-form-item prop="remember">
                        <div class="flex justify-end w-full h-full">
                            <div>
                                <el-link type="primary" :underline="false" @click="() => {
                                    router.push({ path: '/account/login' });
                                }
                                    ">{{ $t("account.goLogin") }}</el-link>
                                <el-divider direction="vertical" />
                                <el-link type="primary" :underline="false" @click="() => {
                                    router.push({ path: '/account/forget' });
                                }
                                    ">{{ $t("account.forgot") }}</el-link>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="w-full" auto-insert-space @click="onSubmit(loginFormRef)"
                            :loading="loading">{{
                                loading ? "" : $t("account.register") }}
                        </el-button>
                    </el-form-item>
                    <el-form-item class="m-0" prop="readme">
                        <div class="w-full animate__animated" :class="{ animate__bounce: unCheck }">
                            <el-checkbox v-model="formData.readme"><span>阅读并接受</span></el-checkbox>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
